<template>
    <div class="app-container">
        <el-row>
            <el-col :span=" 24 " class="card-box">
                <el-card>
                    <template #header>
                        <el-button type="primary" size="small" @click="confirmAdd()">添加音/视频</el-button>
                    </template>
                    <my-table :columns=" columns " :showIndex=" true " :data=" tableData " :loading=" table_loading "
                        :pagination=" pagination " :cellStyle=" { padding: '6px 0' } " @currentChange=" currentChange "
                        @handleSizeChange=" handleSizeChange ">
                        <template #videoFile=" slotProps ">
                            <div class="video" @click="handleCheck(slotProps.callback.row)" v-if="isVideoLink(slotProps.callback.row.videoFile)">
                                <!-- 页面table显示的video标签 -->
                                <video :src=" slotProps.callback.row.videoFile " width="100" preload></video>
                                <!-- <i class="el-icon-video-play playIcon" @click="handleCheck(slotProps.callback.row)"></i> -->
                            </div>
                        </template>
                        <template #operation=" slotProps ">
                            <el-button link type="primary" size="small"
                                @click="handleEdit(slotProps.callback.row)">编辑</el-button>
                            <el-popconfirm title="确认删除？" @confirm="
                                handleDelete(slotProps.callback.row.id)
                                ">
                                <template #reference>
                                    <el-button link type="warning" size="small">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                        <template #videoType=" slotProps ">
                            <div>{{  videoTypeObj[slotProps.callback.row.videoType] }}</div>
                        </template>
                    </my-table>
                </el-card>
                <el-dialog :title=" dialogForm.title " v-model=" dialogForm.dialogVisible " :destroy-on-close=" true "
                    :close-on-click-modal=" false " top="5%" width="500px">
                    <div>
                        <form-page v-model:refObj=" formInfo.formRef " :data=" formInfo.data "
                            :field-list=" formInfo.fieldList " :rules=" formInfo.rules "
                            :label-width=" formInfo.labelWidth " :list-type-info=" listTypeInfo ">
                            <template v-slot:form-item-videoFile>
                                <FileUpload v-model:modelValue=" data.videoFile " :limit=" 1 " :fileSize=" 1024 "
                                    :isDrag=" true " :isShowTip="false" @handleSuccess = "handleSuccess">
                                </FileUpload>
                            </template>
                        </form-page>
                    </div>
                    <template #footer>
                        <span>
                            <el-button size="small" @click="dialogForm.dialogVisible = false">取消</el-button>
                            <el-button size="small" type="primary" @click=" handleSubmit ">确认</el-button>
                        </span>
                    </template>
                </el-dialog>
                <el-dialog title="视频预览" width="72%" append-to-body top="20px"  v-model=" dialogVisible ">
                    <video width="100%" autoplay="autoplay" :src=" playvideo " :poster=" playvideo " controls="controls"
                        id="video" preload></video>
                </el-dialog>
            </el-col>
        </el-row>
    </div>
</template>

<script setup name="productPackage">
import myTable from '@/components/common/table.vue'
import FileUpload from '@/components/FileUpload/aLiYunUpload.vue'
import formPage from '@/components/common/formPage.vue'
import {
    ylLevelVideoList,
    ylLevelVideoAdd,
    ylLevelVideoUpdate,
    ylLevelVideoUpdatedel
} from '@/api/api'
import initRules from '@/utils/initRules'
import { mergeObjOfValue, deepClone } from '@/utils/index'
import { getTableData } from '@/mixins/mixins'
import { nextTick, onMounted, ref, toRefs } from 'vue'
const { proxy } = getCurrentInstance()
const columns = ref([
    {
        label: '音/视频名称',
        prop: 'videoName'
    },
    // {
    //     label: "格式",
    //     prop: "upgradeWay",
    //     slot:'upgradeWay'
    // },
    // {
    //     label: "存储地址",
    //     prop: "firmwareVersion"
    // },
    {
        label: '说明',
        prop: 'videoExplain'
    },
    {
        label: '音/视频大小',
        prop: 'videoSize'
    },
    {
        label: '版本号',
        prop: 'version'
    },
    {
        label: '分类',
        prop: 'videoType',
        slot: 'videoType'
    },
    {
        label: '视频预览',
        prop: 'videoFile',
        slot: 'videoFile'
    },
    {
        label: '创建时间',
        prop: 'createTime',
        time: true
    },
    {
        label: '更新时间',
        prop: 'updateTime',
        time: true
    },
    {
        label: '操作',
        prop: '',
        width: 120,
        align: 'left',
        slot: 'operation'
    }
])

const dialogVisible = ref(false)
const playvideo = ref(null)
const dialogForm = ref({
    dialogVisible: false,
    title: '新增'
})
const formInfoData = {
    id: null,
    videoName: '',
    videoFile: '',
    version: '',
    videoExplain: '',
    videoSize: '',
    videoType: null
}
const listTypeInfo = ref({
    videoTypeList: [
        { label: '分类1', value: 1 },
        { label: '分类2', value: 2 }
    ]
})
const videoTypeObj = {
    1:'分类1',
    2:'分类2',
}
const formInfo = reactive({
    formRef: null,
    data: formInfoData,
    fieldList: [
        { label: '音/视频名称', value: 'videoName', type: 'input' },
        {
            label: '上传音/视频',
            value: 'videoFile',
            slot: true,
            required: true
        },
        { label: '分类', value: 'videoType', type: 'select', list: 'videoTypeList', required: true },
        { label: '版本号', value: 'version', type: 'input', required: true },
        {
            label: '说明',
            value: 'videoExplain',
            type: 'textarea',
            required: true
        }

    ],
    rules: {},
    labelWidth: '110px'
})
const { data, fieldList, rules, formRef } = toRefs(formInfo)
//hook
const {
    tableData,
    pagination,
    table_loading,
    init,
    handleSizeChange,
    handleDelete,
    currentChange
} = getTableData(ylLevelVideoList, ylLevelVideoUpdatedel)

// 生成表单验证
function handleInitRules () {
    rules.value = initRules(fieldList.value)
}
// 编辑
function handleEdit (rowData) {
    mergeObjOfValue(data.value, rowData)
    dialogForm.value.title = '编辑'
    dialogForm.value.dialogVisible = true
}
// 新增
function confirmAdd () {
    mergeObjOfValue(data.value, formInfoData)
    dialogForm.value.title = '新增'
    dialogForm.value.dialogVisible = true
}
// 提交
function handleSubmit () {
    formRef.value.validate((valid) => {
        if (valid) {
            if (dialogForm.value.title == '新增') {
                ylLevelVideoAdd(data.value)
                    .then((res) => {
                        proxy.$modal.msgSuccess('新增成功')
                        dialogForm.value.dialogVisible = false
                        init()
                    })
                    .finally(() => { })
            } else {
                ylLevelVideoUpdate(data.value)
                    .then((res) => {
                        proxy.$modal.msgSuccess('修改成功')
                        dialogForm.value.dialogVisible = false
                        init()
                    })
                    .finally(() => { })
            }
        }
    })
}
function handleSuccess(file){
    data.value.videoSize = (file.size / 1024 /1024).toFixed(1)+'M'
}
// 查看
function handleCheck (row) {
    playvideo.value = row.videoFile // 存储用户点击的视频播放链接
    dialogVisible.value = true
}
function isVideoLink(link) {
  var videoExtensions = ['.mp4', '.avi', '.mov'];
  for (var i = 0; i < videoExtensions.length; i++) {
    if (link.endsWith(videoExtensions[i])) {
      return true;
    }
  }
  return false;
}
data.value = deepClone(formInfoData)
handleInitRules()
init()
</script>
